<template>
    <div class="upload-container">
        <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
        </el-button>
        <el-dialog append-to-body :visible.sync="dialogVisible">
            <el-upload
                    ref="upload"
                    class="editor-slide-upload"
                    :action="upladUrl"
                    :multiple="true"
                    :file-list="fileList"
                    :show-file-list="true"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                    :before-upload="beforeUpload"
                    :on-success="handleSuccess"
                    :on-error="handleError">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <!--<el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
                       list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>-->
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </el-dialog>
    </div>
</template>

<script>
    // import { getToken } from 'api/qiniu'
    import lrz from 'lrz'
    export default {
        name: 'editorSlideUpload',
        props: {
            color: {
                type: String,
                default: '#1890ff'
            }
        },
        data() {
            return {
                dialogVisible: false,
                listObj: {},
                fileList: []
            }
        },
        methods: {
            checkAllSuccess() {
                return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
            },
            handleSubmit() {
                const arr = Object.keys(this.listObj).map(v => this.listObj[v])
                if (!this.checkAllSuccess()) {
                    this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
                    return
                }
                // console.log(arr)
                this.$emit('successCBK', arr)
                this.listObj = {}
                this.fileList = []
                this.dialogVisible = false
            },
            handleSuccess(res, file) {
                const uid = file.uid;
                const objKeyArr = Object.keys(this.listObj);
                for (let i = 0, len = objKeyArr.length; i < len; i++) {
                    if (this.listObj[objKeyArr[i]].uid === uid) {
                        this.listObj[objKeyArr[i]].url = this.replaceImgUrl(res.filePath);
                        this.listObj[objKeyArr[i]].hasSuccess = true;
                        return
                    }
                }
            },
            handleError(err, file, fileList) {
                console.log(err, file, fileList)
            },
            handleRemove(file) {
                const uid = file.uid;
                const objKeyArr = Object.keys(this.listObj);
                for (let i = 0, len = objKeyArr.length; i < len; i++) {
                    if (this.listObj[objKeyArr[i]].uid === uid) {
                        delete this.listObj[objKeyArr[i]];
                        return
                    }
                }
            },
            beforeUpload(file) {
                if (file.size > 1024 * 1024) {
                    this.$notify({
                        title: '提示',
                        message: `图片【${file.name}】大于1M，已过滤`,
                        type: 'warning'
                    });
                    // this.$message.warning(`图片【${file.name}】大于1M，已过滤`);
                    return false;
                }

                const _self = this;
                const _URL = window.URL || window.webkitURL;
                const fileName = file.uid;
                this.listObj[fileName] = {};
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.src = _URL.createObjectURL(file);
                    img.onload = function () {
                        _self.listObj[fileName] = {
                            hasSuccess: false,
                            uid: file.uid,
                            width: this.width,
                            height: this.height
                        }
                    };

                  lrz(file, { quality: 0.7 })
                    .then((res) => {
                      resolve(res.file)
                    })
                    .catch(e => {
                      reject(e)
                    })
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .upload-container{
        .editor-slide-upload{
            margin-bottom: 20px;
        }
    }
</style>
